<template>
	<view class="container">
		<!-- 轮播图部分 -->
		<!-- <swiper class="swiper" circular autoplay interval="3000" duration="1000" :indicator-dots="true" 
				indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff" style="height: 300rpx; width: 100%;">
			<swiper-item>
				<image src="/static/images/送货上门.png" style="width: 100%; height: 100%;"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/images/校园跑腿.png" style="width: 100%; height: 100%;"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/images/快递代寄.png" style="width: 100%; height: 100%;"></image>
			</swiper-item>
		</swiper> -->
		<swiper class="swiper-box" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item class="swiper-box-item" v-for="item in bannerList" :key="item.id">
				<image :src="item.image" style="width: 100%; height: 100%;"></image>
			</swiper-item>
		</swiper>
		
		<!-- 通知栏 -->
		<view class="notice">
			<text class="iconfont icon-notice" style="color: #FF6B6B;"></text>
			<swiper class="notice-swiper" vertical autoplay circular interval="3000">
				<swiper-item>
					<text class="notice-text">重要通知！！！</text>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 功能区域 -->
		<view class="function-grid">
			<!-- 快递代取 -->
			<view class="grid-item" @click="navigateTo('/pages/substitution/substitution')">
				<image src="/static/images/送货上门.png" mode="aspectFit" class="grid-icon"></image>
				<text class="grid-text">快递代取</text>
			</view>
			
			<!-- 校园跑腿 -->
			<view class="grid-item" @click="navigateTo('/pages/errands/errands')">
				<image src="/static/images/校园跑腿.png" mode="aspectFit" class="grid-icon"></image>
				<text class="grid-text">校园跑腿</text>
			</view>
			
			<!-- 快递代寄 -->
			<view class="grid-item" @click="navigateTo('/pages/consignment/consignment')">
				<image src="/static/images/快递代寄.png" mode="aspectFit" class="grid-icon"></image>
				<text class="grid-text">快递代寄</text>
			</view>
			
			<!-- 租借服务 -->
			<view class="grid-item" @click="navigateTo('/pages/lease/lease')">
				<image src="/static/images/租借服务.png" mode="aspectFit" class="grid-icon"></image>
				<text class="grid-text">租借服务</text>
			</view>
			
			<!-- 游戏陪玩 -->
			<view class="grid-item" @click="navigateTo('/pages/play/play')">
				<image src="/static/images/游戏陪玩.png" mode="aspectFit" class="grid-icon"></image>
				<text class="grid-text">游戏陪玩</text>
			</view>
			
			<!-- 帮我送 -->
			<view class="grid-item" @click="navigateTo('/pages/helpDeliver/helpDeliver')">
				<image src="/static/images/帮我送.png" mode="aspectFit" class="grid-icon"></image>
				<text class="grid-text">帮我送</text>
			</view>
		</view>
	</view>
</template>

<script>
import {getBanner} from '@/api/index.js'

export default {
	data() {
		return {
			bannerList: []
		}
	},
	created() {
		this.getBannerList()
	},
	methods: {
		navigateTo(url) {
			uni.navigateTo({
				url
			})
		},
		getBannerList() {
			getBanner().then(res=>{
				const list = [];
				for (let i = 0; i < res.data.bannerList.length; i++) {
					if (res.data.bannerList[i].state === 1) {
						list.push(res.data.bannerList[i]);
					}
				}
				if (res.data.status === 0) {
					this.bannerList = list;
				}
			}).catch(err => {
				console.error('获取banner列表失败：', err);
			})
		},
	}
	
}
</script>

<style>
.container {
	padding: 20rpx;
	background-color: #f5f5f5;
}

/* 轮播图样式优化 */
.swiper-box {
	height: 300rpx;
	border-radius: 16rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.swiper-box-item {
	width: 100%;
	height: 100%;
	display: block;
}

/* 通知栏样式优化 */
.notice {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	margin: 20rpx 0;
	background-color: #FFF;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.notice-swiper {
	height: 40rpx;
	flex: 1;
}

.notice-text {
	font-size: 28rpx;
	color: #333;
}

/* 功能区网格样式优化 */
.function-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
	padding: 10rpx 0;
}

.grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #FFF;
	padding: 30rpx 20rpx;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.grid-item:active {
	transform: scale(0.98);
	background-color: #f9f9f9;
}

.grid-icon {
	width: 90rpx;
	height: 90rpx;
	margin-bottom: 16rpx;
}

.grid-text {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

/* tabBar样式 */
.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #FFF;
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-top: 1rpx solid #eee;
}

.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tab-icon {
	width: 40rpx;
	height: 40rpx;
}

.tab-text {
	font-size: 24rpx;
	color: #999;
	margin-top: 4rpx;
}
</style>
